<script setup lang="ts">
import type { ContractData } from "@/types/contract.types";
import { formatNumberText } from "@/utils/cell";
import { computed } from "vue";
import SymbolSelector from "@/components/SymbolSelector/index.vue";
import { useTradeStore } from "@/store/modules/tradeStore";
import { storeToRefs } from "pinia";
import refresh from "~icons/ep/refresh";

defineOptions({
  name: "instrument-stat"
});

const trade = useTradeStore();
const { selectedAppKey, tick, roundDigits } = storeToRefs(trade);

// writable computed
const symbolModel = computed({
  get: () => trade.symbol,
  set: value => trade.setSymbol(value)
});

const contractModel = computed({
  get: () => trade.contract,
  set: value => trade.setContract(value)
});

const handleContractChange = (c: ContractData | null) => {
  contractModel.value = c;
};

const onManualPreflight = () => {
  void trade.doPreflight();
};

const lastPriceText = computed(() =>
  formatNumberText(tick.value?.last_price, {
    digits: roundDigits.value,
    separated: true
  })
);

const changeRateText = computed(() => {
  const lp = tick.value?.last_price;
  const ps = tick.value?.pre_settle;
  if (
    lp === undefined ||
    lp === null ||
    ps === undefined ||
    ps === null ||
    ps === 0
  ) {
    return "-";
  }

  const chg = lp - ps;
  const rate = (chg / ps) * 100;
  const sign = rate > 0 ? "+" : "";
  return `${sign}${chg.toFixed(roundDigits.value)}/${rate.toFixed(2)}%`;
});

const isUp = computed(() => {
  const lp = tick.value?.last_price;
  const pc = tick.value?.pre_settle;
  if (lp === undefined || lp === null || pc === undefined || pc === null) {
    return null as boolean | null;
  }
  return lp >= pc;
});
</script>

<template>
  <!-- 标的信息 -->
  <div name="instrument-info" class="px-3 py-2">
    <div class="flex-bc gap-4">
      <div class="flex items-baseline">
        <SymbolSelector
          v-model:symbol="symbolModel"
          :disabled="!selectedAppKey"
          disableWarningText="请先选择账户"
          @contract-change="handleContractChange"
        />
        <el-tooltip content="手动刷新" placement="top">
          <el-button
            text
            size="small"
            :icon="refresh"
            class="p-1! text-gray-400 hover:text-gray-600"
            :disabled="!selectedAppKey || !contractModel"
            @click="onManualPreflight"
          />
        </el-tooltip>
      </div>
      <!-- 最新价、涨跌幅 -->
      <div class="flex items-baseline gap-1">
        <div
          class="font-mono text-xl font-semibold"
          :class="{
            'text-green-600': isUp === false,
            'text-red-600': isUp === true,
            'text-gray-700': isUp === null
          }"
        >
          {{ lastPriceText }}
        </div>
        <div
          class="rounded px-2 py-0.5 font-mono text-xs"
          :class="{
            'bg-green-50 text-green-700': isUp === false,
            'bg-red-50 text-red-700': isUp === true,
            'bg-gray-50 text-gray-600': isUp === null
          }"
        >
          {{ changeRateText }}
        </div>
      </div>
    </div>
    <!-- 合约信息 -->
    <div class="flex-ac h-6 gap-2 pt-2 text-xs text-gray-500">
      <div>{{ contractModel?.exchange ?? "" }}</div>
      <div v-if="contractModel?.size">合约乘数 {{ contractModel.size }}</div>
      <div v-if="contractModel?.pricetick">
        最小变动 {{ contractModel.pricetick }}
      </div>
    </div>
  </div>
</template>
